<!DOCTYPE html>
<html lang='zh-CN'>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="./css/mdui.css">
<link rel="stylesheet" href="./css/md.css">
<link rel="stylesheet" href="https://fonts.cat.net/earlyaccess/notosansscsliced.css">
<title>文化传承</title>
<header>
    <div class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}">
                <i class="mdui-icon material-icons">menu</i>
            </a>
            <span class="mdui-typo-title">文化传承</span>
            <div class="mdui-toolbar-spacer"></div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon">
                <i class="mdui-icon material-icons">search</i>
            </a>
        </div>
    </div>
</header>

<body class="mdui-theme-primary-pink mdui-theme-accent-orange mdui-appbar-with-toolbar mdui-drawer-body-left ">
    <!-- 默认抽屉栏在左侧 -->
    <div class="mdui-drawer" id="left-drawer">
        <ul class="mdui-list">

            <a href="news/index.html">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">laptop_chromebook</i>
                    <div class="mdui-list-item-content">联播快讯</div>
                </li>
            </a>

            <a href="excerpt/index.html">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">bookmark</i>
                    <div class="mdui-list-item-content">论据</div>
                </li>
            </a>

            <a href="composition/index.html">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">brush</i>
                    <div class="mdui-list-item-content">作文</div>
                </li>
            </a>

            <a href="about/index.html">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">info_outline</i>
                    <div class="mdui-list-item-content">关于</div>
                </li>
            </a>

        </ul>
    </div>
    <div class="mdui-container">
        <div class="mdui-fab-wrapper" mdui-fab>
            <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
                <!-- 默认显示的图标 -->
                <i class="mdui-icon material-icons">add</i>
                <i class="mdui-icon mdui-fab-opened material-icons">add</i>
            </button>
            <div class="mdui-fab-dial">
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-theme-accent" id="lock_btn">
                    <i class="mdui-icon material-icons">lock</i>
                </button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-theme-accent" id="unlock_btn">
                    <i class="mdui-icon material-icons">lock_open</i>
                </button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-theme-accent" id="page_up">
                    <i class="mdui-icon material-icons">arrow_upward</i>
                </button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-theme-accent" id="page_down">
                    <i class="mdui-icon material-icons">arrow_downward</i>
                </button>

            </div>
        </div>

        <div id="p1"></div>
        <div style="height: 81px"></div>


        <!-- a new welcome page -->
        <div class="mdui-card">
            <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
            <div class="mdui-card-media mdui-ripple">
                <img src="images/wallpaper.png" />
                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                <div class="mdui-card-menu">
                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
                        <i class="mdui-icon material-icons">share</i>
                    </button>
                </div>
            </div>
            <!-- 卡片的标题和副标题 -->
            <div class="mdui-card-primary">
                <div class="mdui-card-primary-title">文化传承</div>
            </div>
            <!-- 卡片的按钮 -->
            <div class="mdui-card-actions">

            </div>

        </div>

        </div>
        <div style="height: 1080px"></div>
    </div>
</body>
<script src="./js/mdui.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fullpage.js"></script>
<script src="./js/smooth-scroll.js"></script>
<script>
    var $$ = mdui.JQ;
    var now_node = new Number(1);
    $$('#lock_btn').on('click', function () {
        $$.lockScreen();
    });
    $$('#unlock_btn').on('click', function () {
        $$.unlockScreen();
    });
    $$('#page_down').on('click', function () {
        now_node += 1;
        var scroll = new SmoothScroll();
        var anchor = document.querySelector('#p' + now_node.toString());
        scroll.animateScroll(anchor);
    });
    $$('#page_up').on('click', function () {
        now_node -= 1;
        if (now_node <= 0) now_node = 1;
        var scroll = new SmoothScroll();
        var anchor = document.querySelector('#p' + now_node.toString());
        scroll.animateScroll(anchor);
    });
    $$('#start_btn').on('click', function () {
        $$('#page_down').trigger('click');
    });
    $$('#more_btn').on('click', function () {
        $$('#page_down').trigger('click');
    });
    //$$('#about').on('click', function () {
    //  
    //});

</script>

</html>